<template>
    <div class="song-list">
        <ul>
            <li @click="selectItem(song,index)" v-for="(song,index) in songs" class="item">
                <div class="rank" v-show="rank">
                    <i class="icon" :class="getRankClass(index)">{{getRankText(index)}}</i>
                </div>
                <div class="content">
                    <h1 class="name">{{song.name}}</h1>
                    <div class="desc">{{getDesc(song)}}</div>
                </div>
            </li>
        </ul>
    </div>
</template>
<script>
    export default{
        props:{
            songs:{type:Array,default:[]},
            rank:{type:Boolean,defalut:false}
        },
        methods:{
            getDesc(song){
                return `${song.singer} . ${song.album}`
            },
            selectItem(item,index){
                this.$emit("select",item,index)
            },
            getRankClass(index){
                if(index<=2){
                    return `icon${index}`
                }else{
                    return `text`
                }
            },
            getRankText(index){
                if(index>2){
                    return index+1
                }
            }
        }
    }
</script>
<style lang="stylus">
@import '~common/stylus/variable'
@import '~common/stylus/mixin'
    .song-list
        .item
            display flex
            align-items center
            box-sizing border-box
            height 64px
            font-size $font-size-medium
            .rank
                flex 0 0 25px
                width 25px
                margin-right 30px
                text-align center
                .icon
                    display inline-block
                    width 25px
                    height 24px
                    background-size 25px 24px
                    &.icon0
                        bg-image('first')
                    &.icon1
                        bg-image('second')
                    &.icon2
                        bg-image('third')
                    &.text
                        color $color-theme
                        font-size $font-size-large
    
            .content
                flex 1
                line-height 20px
                overflow hidden
                .name
                    no-wrap()
                    color $color-text
                .desc
                    no-wrap()
                    color $color-text-d
</style>

